<template>
	<view class="userInfo_box box">
		<view class="userinfo_conatiner">
			<view class="userinfo_conatiner_top_bar">
				<view class="" style="margin-right: 20rpx;" @click="goback">
					<image src="../../static/back.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
				</view>
				<view class="">
					个人信息
				</view>
			</view>
			<view class="userInfo_img">
				<view class="">
					<image :src="userInfo.avatarUrl" mode="" v-if="userInfo.avatarUrl"
						style="border-radius:20rpx;border:5px solid #E4E4E4;wxcs_style_border:9rpx solid #E4E4E4;">
					</image>
				</view>
				<u-upload :fileList="fileList1" @afterRead="select" @delete="deletePic" name="1"
					:previewFullImage="true" :maxCount="10">
					<view class="">
						点击修改头像
					</view>
				</u-upload>
			</view>
			<view class="userinfo_list">
				<view class="userinfo_list_item">
					<view class="userinfo_list_item_left">
						昵称
					</view>
					<view class="userinfo_list_item_right">
						<input type="text" v-model="userInfo.nickName" placeholder="请输入" />
					</view>
				</view>
				<view class="userinfo_list_item">
					<view class="userinfo_list_item_left">
						真实姓名
					</view>
					<view class="userinfo_list_item_right">
						<input type="text" v-model="userInfo.realName" placeholder="请输入" />
					</view>
				</view>
				<view class="userinfo_list_item">
					<view class="userinfo_list_item_left">
						身份证
					</view>
					<view class="userinfo_list_item_right">
						<input type="text" v-model="userInfo.idCard" placeholder="请输入" @blur="checkIdCard" />
					</view>
				</view>
				<view class="userinfo_list_item">
					<view class="userinfo_list_item_left">
						性别
					</view>
					<view class="userinfo_list_item_right">
						<uni-data-select v-model="userInfo.userSex" :localdata="range"
							@change="change"></uni-data-select>
					</view>
				</view>
				<view class="userinfo_list_item">
					<view class="userinfo_list_item_left">
						生日
					</view>
					<view class="userinfo_list_item_right">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="userInfo.birthday"
							@maskClick="maskClick" />
					</view>
				</view>
				<view class="userinfo_list_item">
					<view class="userinfo_list_item_left">
						手机号
					</view>
					<view class="userinfo_list_item_right">
						<input type="text" v-model="userInfo.phone" placeholder="请输入" @blur="checkPhone" />
					</view>
				</view>
				<view class="userinfo_list_item">
					<view class="userinfo_list_item_left">
						住址
					</view>
					<view class="userinfo_list_item_right">
						<input type="text" v-model="userInfo.homeAddress" placeholder="请输入" />
					</view>
				</view>
				<view class="userinfo_list_item">
					<view class="userinfo_list_item_left">
						家乡
					</view>
					<view class="userinfo_list_item_right">
						<input type="text" v-model="userInfo.homeTown" placeholder="请输入" />
					</view>
				</view>

			</view>
		</view>
		<view class="save_btn" @click="saveUserInfo">
			保存
		</view>
	</view>
</template>

<script>
	import {
		getUserDetails,
		updataUserDetails
	} from "../../api/request.js"
	import {
		validateChineseIDCard
	} from "../../utils/idCard.js"
	import {
		validateChinesePhoneNumber
	} from "../../utils/phone.js"
	export default {
		data() {
			return {
				range: [{
						value: null,
						text: "不选"
					}, {
						value: 1,
						text: "男"
					},
					{
						value: 2,
						text: "女"
					}
				],
				userInfo: {
					nickName: "1",
					avatarUrl: "",
					phone: "",
					birthday: "",
					userSex: "",
					idCard: "",
					realName: "",
					homeAddress: "",
					homeTown: ""
				},
				token: null,
				sureIdCard: false
			};
		},
		onReady() {
			console.log("???");
			uni.getStorage({
				key: 'token',
				success: res => {
					console.log(res);
					this.getUserInfo(res.data);
					this.token = res.data
				}
			});
		},
		methods: {
			checkIdCard(e) {
				console.log(e);
				let data = validateChineseIDCard(e.detail.value)
				this.sureIdCard = data
				console.log(data);
			},
			checkPhone() {},
			uploadFile(filePath, token) {
				console.log(filePath, 'filePath');
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'https://test.hdb168.com/activity/act/upload',
						filePath: filePath,
						name: 'file',
						header: {
							'Content-Type': 'multipart/form-data',
							'Authorization': 'Bearer:' + token
						},
						success: (uploadRes) => {
							console.log(uploadRes, 'uploadRes');
							if (uploadRes.statusCode === 200) {
								resolve(uploadRes.data);
							} else {
								reject(new Error('上传失败'));
							}
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},
			deletePic() {},
			async select(e) {
				const that = this
				this.uploadFile(e.file.thumb, this.token)
					.then(response => {
						that.userInfo.avatarUrl = JSON.parse(response).data

						console.log('文件上传成功：', response);
					})
					.catch(error => {
						console.error('文件上传失败：', error);
					});
			},
			async getUserInfo(token) {
				try {
					this.userInfo = await getUserDetails(token);
				} catch (error) {
					console.error('Failed to get user info:', error);
				}
			},
			goback() {
				uni.navigateBack();
			},
			saveUserInfo() {
				console.log(this.userInfo, '???');
				const {
					nickName,
					avatarUrl,
					phone,
					birthday,
					userSex,
					idCard,
					realName,
					homeAddress,
					homeTown
				} = this.userInfo
				console.log(validateChineseIDCard(idCard), idCard);
				if (!validateChineseIDCard(idCard)) {
					uni.showToast({
						icon: "none",
						title: "身份证错误"
					})
					return
				}
				if (!validateChinesePhoneNumber(phone)) {
					uni.showToast({
						icon: "none",
						title: "手机号错误"
					})
					return
				}
				let data = updataUserDetails({
					nickName,
					avatarUrl,
					phone,
					birthday,
					userSex,
					idCard,
					realName,
					homeAddress,
					homeTown
				})
				uni.showToast({
					title: "保存成功"
				})
			}
		}
	}
</script>

<style lang="scss">
	.reInput {
		border: 1px solid red;
	}

	.save_btn {
		width: 90%;
		margin: auto;
		height: 88rpx;
		background: conic-gradient(from 90deg at 50% 0%, #F09583 0%, #F9301C 100%);
		border-radius: 16rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
	}

	.u-upload {
		height: 100%;
	}

	.uni-file-picker,
	.u-upload__wrap {
		width: 100%;
		height: 100%;

		view {
			width: 100% !important;
			height: 100% !important;
		}
	}

	.is-add {
		flex-direction: column;
	}

	.userinfo_conatiner {
		width: 90%;
		margin: auto;
		margin-top: 88rpx;

		.userinfo_conatiner_top_bar {
			margin-bottom: 20rpx;
			display: flex;
		}

		.userInfo_img {
			width: 670rpx;
			height: 336rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			border: 2rpx solid #E8E8E8;
			text-align: center;

			image {
				width: 160rpx;
				height: 160rpx;
				margin: auto;
				margin-top: 62rpx;
				margin-bottom: 28rpx;
			}
		}

		.userinfo_list {
			margin-top: 60rpx;
			display: flex;
			flex-direction: column;

			.userinfo_list_item {
				display: flex;
				width: 100%;
				justify-content: space-between;
				margin-bottom: 60rpx;

				.userinfo_list_item_left {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #000000;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}

				.userinfo_list_item_right {
					font-family: DINAlternate, DINAlternate;
					font-size: 32rpx;
					color: #000000;
					line-height: 38rpx;
					text-align: right;
					font-style: normal;
				}
			}
		}
	}
</style>